<template>
  <div>
    <el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
      <el-form-item
        label="账号"
        style="text-align: center; margin-top: 30px; font-weight: bold"
        prop="uid"
      >
        <el-input
          v-model="form.uid"
          type="text"
          style="width: 250px; height: 30px; font-weight: bold"
          disabled
        ></el-input>
      </el-form-item>
      <el-form-item
        label="姓名"
        style="text-align: center; margin-top: 30px; font-weight: bold"
        prop="username"
      >
        <el-input
          v-model="form.username"
          type="text"
          style="width: 250px; height: 30px; font-weight: bold"
        ></el-input>
      </el-form-item>
      <el-form-item label="性别" style="font-weight: bold; font-size: large" prop="gender">
        <el-radio-group v-model="form.gender" style="margin-left: 50px">
          <el-radio label="男" value="男" style="font-weight: bold">男</el-radio>
          <el-radio label="女" value="女" style="font-weight: bold">女</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item
        label="原密码"
        style="text-align: center; margin-top: 30px; font-weight: bold"
        prop="password"
      >
        <el-input
          v-model="form.password"
          type="password"
          style="width: 250px; height: 30px; font-weight: bold"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="新密码"
        style="text-align: center; margin-top: 30px; font-weight: bold"
        prop="newPass"
      >
        <el-input
          v-model="form.newPass"
          type="password"
          style="width: 250px; height: 30px; font-weight: bold"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="确认密码"
        style="text-align: center; margin-top: 30px; font-weight: bold"
        prop="checkPass"
      >
        <el-input
          v-model="form.checkPass"
          type="password"
          style="width: 250px; height: 30px; font-weight: bold"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="电话"
        style="text-align: center; margin-top: 30px; font-weight: bold"
        prop="phone"
      >
        <el-input
          v-model="form.phone"
          type="text"
          style="width: 250px; height: 30px; font-weight: bold"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="邮箱"
        style="text-align: center; margin-top: 30px; font-weight: bold"
        prop="email"
      >
        <el-input
          v-model="form.email"
          type="text"
          style="width: 250px; height: 30px; font-weight: bold"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" style="float: left; margin-left: 10%" @click="update"
          >修改</el-button
        >
        <el-button
          type="danger"
          @click="router.push('/LoginMobile')"
          style="float: right; margin-right: 18%"
          >取消</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>
<script setup>
import axios from 'axios';
import { onBeforeMount, reactive, ref } from 'vue';
import { ElMessage } from 'element-plus';
import { SM3 } from '@/utils/sm3.js';
import router from '../../../router';
let form = reactive({
  uid: '',
  username: '',
  gender: '',
  password: '',
  addTime: '',
  phone: '',
  email: '',
  headSrc: '',
  checkPass: '',
  newPass: '',
});
const formRef = ref(null);
const validatePass5 = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请再次输入密码'));
  } else if (value !== form.newPass) {
    callback(new Error('两次输入密码不一致!'));
  } else {
    callback();
  }
};
const validatePass3 = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('手机号不可为空'));
  } else {
    if (value !== '') {
      let reg = /^1[3456789]\d{9}$/;
      if (!reg.test(value)) {
        callback(new Error('请输入有效的手机号码'));
      }
    }
    callback();
  }
};
const validatePass4 = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请正确填写邮箱'));
  } else {
    if (value !== '') {
      let reg = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
      if (!reg.test(value)) {
        callback(new Error('请输入有效的邮箱'));
      }
    }
    callback();
  }
};
const rules = {
  username: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
  password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
  newPass: [{ required: true, message: '请输入密码', trigger: 'blur' }],
  checkPass: [{ validator: validatePass5, trigger: 'blur', required: true }],
  phone: [{ validator: validatePass3, trigger: 'blur', required: true }],
  email: [{ validator: validatePass4, trigger: 'blur', required: true }],
};
onBeforeMount(() => {
  form.uid = JSON.parse(sessionStorage.getItem('uid'));
  form.username = JSON.parse(sessionStorage.getItem('username'));
  form.gender = JSON.parse(sessionStorage.getItem('gender'));
  form.phone = JSON.parse(sessionStorage.getItem('phone'));
  form.email = JSON.parse(sessionStorage.getItem('email'));
});
const update = () => {
  formRef.value.validate(valid => {
    if (valid) {
      const password = JSON.parse(sessionStorage.getItem('password'));
      let pass = password;
      if (SM3(form.password) === pass) {
        form.password = SM3(form.newPass);
        axios.post('/api/user/updateUser', form).then(res => {
          if (res.data !== null) {
            ElMessage({
              type: 'success',
              message: '更新成功',
            });
            sessionStorage.setItem('uid', JSON.stringify(res.data.uid));
            sessionStorage.setItem('username', JSON.stringify(res.data.username));
            sessionStorage.setItem('password', JSON.stringify(res.data.password));
            sessionStorage.setItem('gender', JSON.stringify(res.data.gender));
            sessionStorage.setItem('headSrc', JSON.stringify(res.data.headsrc));
            sessionStorage.setItem('phone', JSON.stringify(res.data.phone));
            sessionStorage.setItem('email', JSON.stringify(res.data.email));
            router.push('/');
          }
        });
      }
    }
  });
};
</script>
